import { Component, OnInit, ElementRef, ViewChild, OnChanges, Input } from '@angular/core';

import * as echarts from 'echarts';
import { ResizeService } from '../../services/resize.service';
import { map, tap } from 'rxjs/operators';

@Component({
	selector: 'm-echarts',
	templateUrl: './echarts.component.html',
	styleUrls: ['./echarts.component.scss'],
})
export class EchartsComponent implements OnInit {
	@ViewChild('echarts') chartsRef: ElementRef<HTMLDivElement>;
	charts: echarts.ECharts;
	constructor(private resizeService: ResizeService) {}
	resize$ = this.resizeService.$WindowResize.pipe(
		tap(() => this.charts && this.charts.resize()),
		map(() => null),
	);

	ngOnInit() {
		this.charts = echarts.init(this.chartsRef.nativeElement);
	}
	setOption(option: echarts.EChartOption, notMerge?: boolean, lazyUpdate?: boolean) {
		this.charts.setOption(option, notMerge, lazyUpdate);
		this.charts.resize();
	}
}
